<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="layui/css/layui.css"/>
    <script type="text/javascript" src="layui/layui.js"></script>
    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
    <link rel="stylesheet" href="css/header.css"/>
    <script>
        /*
        $(function(){

            //下拉导航的显式与隐藏
            $("#xl").mouseenter(function(){
                $(".xldh").show();
            });
            $("#xl").mouseleave(function(){
                $(".xldh").hide();
            });
            $(".xldh").mouseenter(function(){
                $(".xldh").show();
            });
            $(".xldh").mouseleave(function(){
                $(this).hide();
            });

            //点击购物车
            $(".my-shopping").click(function(){
                //location.assign("shopping.html");
                window.open("shopping.html");
            });
        });*/
    </script>
</head>
<body>

<div id="app">
    <!-- 头部start -->
    <div class="my-header">
        <p class="my-login" v-if="!isLogin">
            <a href="login.html" target="_parent">请登录</a>
            <a href="reg.html" target="_parent">在线注册</a>
        </p>

        <p class="my-login" v-if="isLogin">
            <a><span style="color: #ff6600">欢迎您：{{loginSuccessUserInfo.username.substring(0, 8)}}</span></a>
            <a href="javascript:void(0);" @click="doLogout">注销</a>
        </p>

        <p class="my-order">
            <a href="index.html" target="_parent">商城首页</a>
            <a href="userOrder.html" target="_parent">我的订单</a>
            <a href="userCenter.html" target="_parent">会员中心</a>
            <a href="admin/login.html" target="_blank">商家后台</a>
            <!--<a href="javascript:;" id="xl">站点导航</a>-->
        </p>
        <!--下拉导航-->
        <div class="xldh"></div>
    </div>

    <!-- 搜索部分start -->
    <div class="layui-container" style="height:40px;z-index:999;">
        <div class="layui-row layui-col-space15">
            <!--显示logo-->
            <div class="layui-col-md2" style="cursor:pointer;"
                 onclick="javascript:window.parent.location.href='index.html'">
                <div class="my-logo">
                    <span><img src="images/xiaomi_logo.jpg"></span>
                </div>
                <div class="my-logo-font">
                    小米商城
                </div>
            </div>

            <!--搜索框-->
            <div class="layui-col-md8" style="">
                <input class="my-search" placeholder="搜索产品关键词" type="text" name="search"/>
                <!--搜索按钮-->
                <div class="my-search-btn">
                    <i class="layui-icon layui-icon-search"></i>
                </div>
            </div>

            <div class="layui-col-md2" style="">
                <!--购物车-->
                <div class="my-shopping" @click="showCart">
                    <span class="layui-icon layui-icon-cart"></span>
                    购物车
                    <span class="layui-badge" id="my-shopping-num">{{currentBuyNumber}}</span>
                </div>
                <!--购物车详情-->
                <div class="my-shopping-mess">

                </div>

            </div>
        </div>
    </div>
    <!-- 搜索部分end -->
</div>

<!--以下引入前端开发类库-->
<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.min.js"></script>
<script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/axios/0.26.0/axios.min.js"
        type="application/javascript"></script>
<!--引入elementui组件-->
<script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/element-ui/2.15.7/index.min.js"
        type="application/javascript"></script>
<link href="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/element-ui/2.15.7/theme-chalk/index.min.css"
      type="text/css" rel="stylesheet"/>

<!--以下引入一些前端的工具类-->
<script src="js/util/outils.min.js"></script>
<!--以下是引入前端的相关接口-->
<script src="js/api/commons.js"></script>
<script src="js/api/baseUrl.js"></script>
<script src="js/api/users.js"></script>

<script type="module">
    let vm = new Vue({
        el: '#app',
        data: {
            isLogin: JSON.parse(sessionStorage.getItem("status.xiaomimall")),  //说明没有登录
            loginSuccessUserInfo: {
                username: ''
            },
            currentBuyNumber: 0
        },
        mounted() {
            if(this.isLogin === null){
                isLogin().then(resp => {
                    console.log('-------初始化登录状态，要发送请求一次------');
                    console.log(resp.data.data);
                    this.isLogin = resp.data.data;
                    //一旦检查过用户的登录状态，把这个状态保存浏览器的session中.sessionStorage; //session
                    //localStorage
                    sessionStorage.setItem("status.xiaomimall",this.isLogin);
                    //'false' ,'true'
                    if (this.isLogin) {
                        console.log('判断是否登录，第一次发送请求完毕：'+this.isLogin);
                        this.loginSuccessUserInfo = JSON.parse(localStorage.getItem("currentLoginSuccessUserInfo"));
                        this.currentBuyNumber = JSON.parse(localStorage.getItem("cart.xiaomimall_"+this.loginSuccessUserInfo.uid)).goodsList.length;
                    }
                })
            }else{
                console.log("登录状态已经保存到sessionStorage");
                console.log("目前的登录状态是："+this.isLogin);
                if (this.isLogin) {
                    console.log('登录状态已经保存到sessionStorage,尝试获取用户资料：'+this.isLogin);
                    this.loginSuccessUserInfo = JSON.parse(localStorage.getItem("currentLoginSuccessUserInfo"));
                    this.currentBuyNumber = JSON.parse(localStorage.getItem("cart.xiaomimall_"+this.loginSuccessUserInfo.uid)).goodsList.length;
                }
            }
        },
        methods: {
            //用户注销的方法
            doLogout() {
                logout().then(resp => {
                    if (resp.data.code === 200) {
                        this.$message({
                            message: '注销成功！',
                            type: 'success'
                        });

                        //把cookie里保存satoken清空了
                        outils.removeCookie("satoken");
                        //把localStorage保存的用户资料清空一下。
                        window.localStorage.removeItem("currentLoginSuccessUserInfo");
                        sessionStorage.removeItem("status.xiaomimall")
                        //起一个定时器，跳转到登录首页
                        setTimeout(() => {
                            //window.location.parent.href='login.html';
                            window.parent.location.href = 'login.html';
                        }, 1000)
                    }
                })
            },

            showCart(){
                /*
                if(this.isLogin){
                    window.parent.location.href= 'shopping.html'
                }else{
                    window.parent.location.href='login.html';
                }*/

                window.parent.location.href='shopping.html';

            }
        }
    })
</script>

</body>
</html>
